<#--
	String id, name, 
	Collection collection, String property, String labelProperty, String parentProperty
-->
<@css src="/static/espirit/styles/zTreeStyle/zTreeStyle.css" async=false _inner=true/>
<@script src="/static/espirit/scripts/jquery.ztree.all-3.1.js" async=false _inner=true/>
<#if !id?? || id == ''>
	<#assign treeId=fn.id>
<#else>
	<#assign treeId=id>
</#if>
<div style="position: relative;" class="jbox jtreebox">
	<script>
		<#assign labelVal=''>
		<#if val == ''>
			<#assign matchProperty = ''>
		<#else>
			<#assign matchProperty = val + ','>
		</#if>
		var zNodes${treeId} =[
			<#list collection as item>
				<#assign pId = fn.val(item, parentProperty)!0>
				<#assign itemProperty = item[property]>
				<#assign itemLabelProperty = item[labelProperty]?string>
				<#if item_index!=0>,</#if>{
					id:${itemProperty}, pId:${pId}, name: "${fn.quote(itemLabelProperty)}"
				}
				<#if matchProperty!=''>
					<#if matchProperty?index_of(itemProperty + ',') != -1>
						<#if labelVal == ''>
							<#assign labelVal = itemLabelProperty>
						<#else>
							<#assign labelVal = labelVal + ',' + itemLabelProperty>
						</#if>
					</#if>
				</#if>
			</#list>
		];
	</script>
	<div<#if !ps.isMock()> onclick="initTreebox(event, this, zNodes${treeId}, 'zTreeMenu${treeId}')"</#if> class="treeArea">${labelVal}</div>
	<input type="hidden" name="${name}" value="${fn.s(val,name)}">
</div>